<template>
  <div class="hello">
    <h1>DynamicForm测试页</h1>
    <div class="search">
      <dynamic-form :schema="schema" :model="model"></dynamic-form>
    </div>
    <dynamic-form :schema="schema1" :model="model"></dynamic-form>
    <dynamic-form :schema="schema2" :model="model"></dynamic-form>
    <!--<form class="form-inline">-->
      <!--<div class="form-group">-->
        <!--<label class="control-label">测试</label>-->
        <!--<input-date-picker type="date"  placeholder="选择日期" v-model="time" :field="schema.fields[0]"></input-date-picker>-->
      <!--</div>-->
    <!--</form>-->
  </div>
</template>

<script>
  import InputTypes from '../../libs/dynamic-form/input-types'
  import DynamicForm from '../../libs/dynamic-form'

  export default {
    components: {
      DynamicForm,
      InputDatePicker: InputTypes.InputDatePicker
    },
    data () {
      return {
        model: {date: new Date(), datetime: new Date(1507292120000)},
        time: null,
        schema: {
//          formClass: 'df-form-grid-2',
          fields: [
            {
              label: '组1',
              name: 'group01',
              labelStyle: {'color': '#ff0000'},
              inputWrapperClass: 'df-form-grid-3',
              description: '不是吧。。。。',
              fields: [
                {
                  componentType: InputTypes.InputDatePicker,
                  datePickerType: 'date',
                  milliseconds: true,
                  name: 'date',
                  label: '单日期',
                  pickerOptions: {
                    disabledDate (time) {
                      return time.getTime() < Date.now() - 8.64e7
                    }
                  },
                  validators: {
                    required: true
                  }
                },
                {
                  componentType: InputTypes.InputDatePicker,
                  datePickerType: 'datetime',
                  milliseconds: true,
                  name: 'datetime',
                  label: '日期时间',
                  pickerOptions: {
                    disabledDate (time) {
                      return time.getTime() < new Date(1502244610000)
                    }
                  }
                },
                {
                  componentType: InputTypes.InputDatePicker,
                  datePickerType: 'datetimerange',
                  milliseconds: true,
                  name: 'daterange',
                  label: '日期区间'
                },
                {
                  label: '组11',
                  name: 'group01',
                  inputWrapperClass: 'df-form-grid-3',
                  fields: [
                    {
                      componentType: InputTypes.InputDatePicker,
                      datePickerType: 'date',
                      milliseconds: true,
                      name: 'date',
                      label: '单日期',
                      pickerOptions: {
                        disabledDate (time) {
                          return time.getTime() < Date.now() - 8.64e7
                        }
                      }
                    },
                    {
                      componentType: InputTypes.InputDatePicker,
                      datePickerType: 'datetime',
                      milliseconds: true,
                      name: 'datetime',
                      label: '日期时间',
                      pickerOptions: {
                        disabledDate (time) {
                          return time.getTime() < new Date(1502244610000)
                        }
                      }
                    },
                    {
                      componentType: InputTypes.InputDatePicker,
                      datePickerType: 'datetimerange',
                      milliseconds: true,
                      name: 'daterange',
                      label: '日期区间'
                    }
                  ]
                }
              ]
            },
            {
              label: '组2',
              name: 'group2',
              fields: [
                {
                  name: 'f1',
                  label: 'f1',
                  componentType: InputTypes.InputText
                }
              ]
            },
            {
              name: 'f2',
              label: 'f2',
              componentType: InputTypes.InputText
            },
            {
              name: 'f3',
              label: 'f3',
              addon: '￥',
              addonOnLeft: true,
              componentType: InputTypes.InputText
            }
          ]
        },
        schema1: {
          formClass: 'df-form-inline df-form-horizontal',
          fields: [
            {
              label: '组1',
              name: 'group01',
              fields: [
                {
                  componentType: InputTypes.InputDatePicker,
                  datePickerType: 'date',
                  milliseconds: true,
                  name: 'date',
                  label: '单日期',
                  pickerOptions: {
                    disabledDate (time) {
                      return time.getTime() < Date.now() - 8.64e7
                    }
                  },
                  validators: {
                    required: true
                  }
                },
                {
                  componentType: InputTypes.InputDatePicker,
                  datePickerType: 'datetime',
                  milliseconds: true,
                  name: 'datetime',
                  label: '日期时间',
                  description: '不是吧。。。。',
                  pickerOptions: {
                    disabledDate (time) {
                      return time.getTime() < new Date(1502244610000)
                    }
                  }
                },
                {
                  componentType: InputTypes.InputDatePicker,
                  datePickerType: 'datetimerange',
                  milliseconds: true,
                  name: 'daterange',
                  label: '日期区间'
                },
                {
                  label: '组11',
                  name: 'group01',
                  fields: [
                    {
                      componentType: InputTypes.InputDatePicker,
                      datePickerType: 'date',
                      milliseconds: true,
                      name: 'date',
                      label: '单日期',
                      pickerOptions: {
                        disabledDate (time) {
                          return time.getTime() < Date.now() - 8.64e7
                        }
                      }
                    },
                    {
                      componentType: InputTypes.InputDatePicker,
                      datePickerType: 'datetime',
                      milliseconds: true,
                      name: 'datetime',
                      label: '日期时间',
                      pickerOptions: {
                        disabledDate (time) {
                          return time.getTime() < new Date(1502244610000)
                        }
                      }
                    },
                    {
                      componentType: InputTypes.InputDatePicker,
                      datePickerType: 'datetimerange',
                      milliseconds: true,
                      name: 'daterange',
                      label: '日期区间'
                    }
                  ]
                }
              ]
            },
            {
              label: '组2',
              name: 'group2',
              fields: [
                {
                  name: 'f1',
                  label: 'f1',
                  componentType: InputTypes.InputText
                }
              ]
            },
            {
              name: 'f2',
              label: 'f2',
              componentType: InputTypes.InputText
            },
            {
              name: 'f3',
              label: 'f3',
              componentType: InputTypes.InputText
            }
          ]
        },
        schema2: {
          formClass: 'df-form-horizontal df-form-grid-2',
          fields: [
            {
              label: '组1',
              name: 'group01',
              inputWrapperClass: 'df-form-grid-3',
              fields: [
                {
                  componentType: InputTypes.InputDatePicker,
                  datePickerType: 'date',
                  milliseconds: true,
                  name: 'date',
                  label: '单日期',
                  pickerOptions: {
                    disabledDate (time) {
                      return time.getTime() < Date.now() - 8.64e7
                    }
                  },
                  validators: {
                    required: true
                  }
                },
                {
                  componentType: InputTypes.InputDatePicker,
                  datePickerType: 'datetime',
                  milliseconds: true,
                  name: 'datetime',
                  label: '日期时间',
                  pickerOptions: {
                    disabledDate (time) {
                      return time.getTime() < new Date(1502244610000)
                    }
                  }
                },
                {
                  componentType: InputTypes.InputDatePicker,
                  datePickerType: 'datetimerange',
                  milliseconds: true,
                  name: 'daterange',
                  label: '日期区间'
                },
                {
                  label: '组11',
                  name: 'group01',
                  inputWrapperClass: 'df-form-grid-3',
                  fields: [
                    {
                      componentType: InputTypes.InputDatePicker,
                      datePickerType: 'date',
                      milliseconds: true,
                      name: 'date',
                      label: '单日期',
                      pickerOptions: {
                        disabledDate (time) {
                          return time.getTime() < Date.now() - 8.64e7
                        }
                      }
                    },
                    {
                      componentType: InputTypes.InputDatePicker,
                      datePickerType: 'datetime',
                      milliseconds: true,
                      name: 'datetime',
                      label: '日期时间',
                      pickerOptions: {
                        disabledDate (time) {
                          return time.getTime() < new Date(1502244610000)
                        }
                      }
                    },
                    {
                      componentType: InputTypes.InputDatePicker,
                      datePickerType: 'datetimerange',
                      milliseconds: true,
                      name: 'daterange',
                      label: '日期区间'
                    }
                  ]
                }
              ]
            },
            {
              label: '组2',
              name: 'group2',
              fields: [
                {
                  name: 'f1',
                  label: 'f1',
                  description: '不是吧。。。。',
                  componentType: InputTypes.InputText
                }
              ]
            },
            {
              name: 'f2',
              label: 'f2',
              componentType: InputTypes.InputText
            },
            {
              name: 'f3',
              label: 'f3',
              componentType: InputTypes.InputText
            }
          ]
        }
      }
    }
  }
</script>

<style>

</style>
